import React from 'react';
import { connect } from 'dva';
import ProductList from '../components/ProductList';

const Products = ({ dispatch, products }) => {
    function handleDelete(id) {
        /**
         * dispatching function 是一个用于触发 action 的函数，
         * action 是改变 State 的唯一途径，但是它只描述了一个行为，
         * 而 dipatch 可以看作是触发这个行为的方式，
         * 而 Reducer 则是描述如何改变数据的。
         */
        dispatch(
            /**
             * Action 是一个普通 javascript 对象，它是改变 State 的唯一途径。
             * 无论是从 UI 事件、网络回调，还是 WebSocket 等数据源所获得的数据，
             * 最终都会通过 dispatch 函数调用一个 action，从而改变对应的数据。
             * action 必须带有 type 属性指明具体的行为，其它字段可以自定义，
             * 如果要发起一个 action 需要使用 dispatch 函数；
             * 需要注意的是 dispatch 是在组件 connect Models以后，通过 props 传入的。
             */
            {
                type: 'products/delete',    // 如果在 model 外调用，需要添加 namespace
                payload: id,                // 需要传递的信息
            }
        );
    }
    return (
        <div>
            <h2>List of Products</h2>
            <ProductList onDelete={handleDelete} products={products} />
        </div>
    );
};

// export default Products;
export default connect(({ products }) => ({
    products,
}))(Products);